<%--
    Document   : list
    Created on : 13.09.2010, 15:48:04
    Author     : nico
--%>

<%@page import="java.util.HashMap"%>
<%@page import="se.bth.ke.firstfriend.util.Util"%>
<%@page import="static se.bth.ke.firstfriend.util.Util.TODO_DEADLINE_FORMAT"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.TreeMap"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="u" uri="http://nixis.de/jsp/tags/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>Your todos</title>

        <!-- Include the timeline -->
        <script type="text/javascript">
            Timeline_ajax_url = "<u:url value="/scripts/lib/timeline_2.3.0/src/ajax/api/simile-ajax-api.js" />";
            Timeline_urlPrefix = "<u:url value="/scripts/lib/timeline_2.3.0/src/webapp/api/" />";
            Timeline_parameters = "bundle=true";
        </script>
        <script type="text/javascript" src="<u:url value="/scripts/lib/timeline_2.3.0/src/webapp/api/timeline-api.js" />"></script>
        <script type="text/javascript">
            var timeline;
            var resizeTimerID = null;

            function timelineSetup() {
                var theme = Timeline.ClassicTheme.create(); // create the theme
                theme.event.track.height = 14;
                theme.event.tape.height = 10;

                var eventSource = new Timeline.DefaultEventSource();
                var bandInfos = [
                        Timeline.createBandInfo({
                                eventSource:	eventSource,
                                width:          "70%",
                                intervalUnit:   Timeline.DateTime.MONTH,
                                intervalPixels: 100,
                                theme:          theme
                        }),

                        Timeline.createBandInfo({
                                eventSource:	eventSource,
                                width:          "30%",
                                intervalUnit:   Timeline.DateTime.YEAR,
                                intervalPixels: 200,
                                layout:         "overview",
                                theme:          theme
                        })
                ];
                bandInfos[1].syncWith = 0;
                bandInfos[1].highlight = true;

                timeline = Timeline.create($("#timeline").get(0), bandInfos);
                timeline.showLoadingMessage();
                //eventSource.loadJSON(eventData, document.location.href);
                Timeline.loadJSON("<u:url value="/todo/timeline?show=${it.showBy}&order=${it.orderBy}" />", function(json, url) {
                    eventSource.loadJSON(json, url);
                    timeline.hideLoadingMessage();
                });
            }

            function timelineResize() {
                    if (resizeTimerID == null) {
                            resizeTimerID = window.setTimeout(function() {
                                    resizeTimerID = null;
                                    timeline.layout();
                            }, 500);
                    }
            }

            $(function() {
                timelineSetup();
                $("body").resize(timelineResize);
            });
        </script>

        <style type="text/css">
            @import url('<u:url value="/style/timeline.css" />');
        </style>
        <style type="text/css">
            @import url('<u:url value="/style/todo.css" />');
        </style>
    </head>
    
    <body>
	<div id="timeline"></div>
        <%
            Map<String, String> todoOrderBy = new TreeMap<String, String>() {{
                put("relevance", "most relevant");
                put("added", "date added");
                put("deadline", "deadline");
                put("priority", "priority");
            }};

            request.setAttribute("todoOrderBy", todoOrderBy);

            Map<String, String> todoShowBy = new TreeMap<String, String>() {{
                put("todo", "in progress");
                put("done", "completed");
                put("removed", "removed");
                put("all", "all");
            }};

            request.setAttribute("todoShowBy", todoShowBy);

            request.setAttribute("TODO_DATE_FORMAT", Util.TODO_DEADLINE_FORMAT_STRING);
            request.setAttribute("TODO_PRIORITY_MAP", Util.TODO_PRIORITY_MAP);
        %>
        <div class="heading main-heading">
            <h1>Your todos (${it.showBy})</h1>
            <div class="tabs">
                <a href="#" class="tab display-options">
                    <span class="tab-content">display &raquo;</span>
                    <ul class="options">
                        <c:forEach var="entry" items="${todoShowBy}">
                            <li>
                                <input title="Show to-dos ${entry.value}" id="show-${entry.key}" type="radio"
                                       value="${entry.key}" name="show-by" ${it.showBy == entry.key ? ' checked="checked"' : ''}
                                       onclick="window.location.href='?show=${entry.key}&order=${it.orderBy}'" />
                                <label for="show-${entry.key}">show ${entry.value}</label>
                            </li>
                        </c:forEach>
                    </ul>
                </a>
                <c:forEach var="entry" items="${todoOrderBy}">
                    <c:set var="currentOrder" value="${it.orderBy == entry.key}" />
                    <a class="tab tab-content${currentOrder ? ' active' : ''}" title="${currentOrder ? 'Invert order' : 'Order'} to-dos by ${entry.value}" href="?show=${it.showBy}&order=${entry.key}${currentOrder && not it.sortOrderInverted ? '&invert=true' : ''}">
                        ${entry.value}
                    </a>
                </c:forEach>
            </div>
        </div>
        <ul class="todo-list">
            <c:forEach var="info" items="${it.viewableItems}">
                <li class="todo" id="todo-${info.todo.id}" ${info.deleted ? 'style="opacity: .6"' : ''}>
                    <div class="control">
                        <a class="ajax open-lazy no-text-fix todo-icon priority priority-${info.todo.priority}"
                           title="Click to toggle priority (is currently ${TODO_PRIORITY_MAP[info.todo.priority]})"
                           href="<u:url value="/todo/${info.todo.id}/togglePriority" />">
                            <span>Toggle priority of todo</span>
                        </a>
                    </div>

                    <div class="label">
                        <h3>
                            <a href="<u:url value="/article/${info.article.sluggedId}"/>">${info.article.title}</a>
                        </h3>
                        <fmt:formatDate pattern="${TODO_DATE_FORMAT}" value="${info.todo.deadline}" var="deadline"/>

                        <span class="status deadline">
                            <a class="ajax" href="<u:url value="/todo/${info.todo.id}/changeDeadline" />" rel="change-deadline-dialog" title="Click to change deadline for selected to-do">
                                ${deadline != null ? 'Due ' : ''}${deadline != null ? deadline : 'No deadline set'}
                            </a>
                        </span>
                        <p>bla bla</p>
                    </div>

                    <div class="control" ${info.deleted ? 'style="display: none"' : ''}>
                        <a title="Click to toggle completed status of to-do" class="todo-action todo-icon complete-mark ajax no-text-fix open-lazy ${info.done ? 'checked' : ''}"
                           href="<u:url value="/todo/${info.todo.id}/toggleComplete"/>"
                           rel="toggle-completed-dialog">
                            <span>Toggle complete status</span>
                        </a>
                    </div>

                    <div class="control" ${info.done ? 'style="display: none"' : ''}>
                        <a title="Click to toggle deleted status of to-do" class="todo-action todo-icon remove-mark ajax no-text-fix open-lazy ${info.deleted ? 'checked' : ''}"
                           href="<u:url value="/todo/${info.todo.id}/toggleRemove"/>" 
                           rel="toggle-deleted-dialog">
                            <span>Toggle deleted status</span>
                        </a>
                    </div>
                </li>
            </c:forEach>
        </ul>

        <c:if test="${fn:length(it.viewableItems) == 0 && it.showBy != 'all'}">
        <p>
            No items are displayed in this selection. Eigher because you do not yet have any to-dos or because
            you specified a restrictive view filter. <a href="?show=all&order=${it.orderBy}">Show all to-dos</a>.
        </p>
        </c:if>

        <script type="text/javascript">
            $(function() {
                $(".todo-action").click(function(event) {
                    event.preventDefault();
                    
                    var other = $(this).is(".complete-mark") ?
                            ".remove-mark" : ".complete-mark";

                    var action = $(this).is(".checked") ?
                        "show" : "hide";

                    if ($(this).is(".remove-mark")) {
                        var opacity = $(this).is(".checked") ? 1 : 0.6;
                        $(this)
                            .parents(".todo")
                            .animate({opacity: opacity}, 500);
                    }

                    $(this)
                        .toggleClass("checked")
                        .parents(".todo")
                            .find(other).parent()[action]("fast");
                });
            });
        </script>
        <small>
            If you do not yet have any to-dos, find articles on the
            <a href="<u:url value="/"/>">start page</a> or via the search bar
            on top of this page and file them as a to-do.
        </small>
    </body>
</html>
